<template>
  <!-- 添加或修改盘点计划对话框 -->
  <el-dialog :title="title" v-if="open" v-model="open" width="600px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="90px" style="padding-left: 10%">
      <el-form-item label="分类名称:" prop="supplierClassifyName">
        <el-input v-model="form.supplierClassifyName"></el-input>
      </el-form-item>
      <el-form-item label="排序:" prop="sort">
        <el-input v-model="form.sort"></el-input>
      </el-form-item>
      <el-form-item label="上级分类" prop="parentId">
        <el-tree-select
          v-model="form.parentId"
          :data="classifyList"
          default-expand-all
          :props="{ value: 'id', label: 'supplierClassifyName', children: 'children' }"
          value-key="id"
          placeholder="选择上级分类"
          check-strictly
        />
      </el-form-item>
      <el-form-item label="金额等级" prop="amountLevel">
        <div style="display: flex" :style="'width: 400px'">
          <el-select style="width: 390px;padding-right: 10px;" v-model="form.amountLevel" clearable reserve-keyword>
            <el-option v-for="item in amount_level" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-button type="text" @click="addAmountLevel">新增等级</el-button>
        </div>
      </el-form-item>
      <el-form-item label="备注:" prop="remark">
        <el-input type="textarea" :rows="4" v-model="form.remark"></el-input>
      </el-form-item>
      <el-form-item label="状态:" prop="classStatus">
        <el-radio-group v-model="form.classStatus">
          <el-radio label="1">正常</el-radio>
          <el-radio label="0">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </template>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
      <el-form ref="dictForm" :model="dictForm" :rules="dictRules" label-width="80px">
        <el-form-item label="字典类型">
          <el-input v-model="dictForm.dictType" :disabled="true" />
        </el-form-item>
        <el-form-item label="字典标签" prop="dictLabel">
          <el-input v-model="dictForm.dictLabel" placeholder="请输入数据标签" />
        </el-form-item>
        <el-form-item label="字典键值" prop="dictValue">
          <el-input v-model="dictForm.dictValue" placeholder="请输入数据键值" />
        </el-form-item>
        <el-form-item label="显示排序" prop="dictSort">
          <el-input-number v-model="dictForm.dictSort" controls-position="right" :min="0" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitDictForm">确 定</el-button>
          <el-button @click="dictCancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </el-dialog>
</template>

<script>
import modelMixin from '@/mixins/modelMixin';
import { getClassifyAllList, getClassifyTree } from '@/api/goods/classify/index'
import { handleTree } from '@/utils/ruoyi';
import classify from '@/api/goods/classify';
import { addData } from '@/api/system/dict/data';

export default {
  name: 'addForm',
  mixins: [modelMixin],
  data() {
    return {
      funcObj: classify, //方法对象
      open: false,
      title: '添加分类',
      form: {
        classStatus: '1',
        sort: '0',
        classifyType: '1'
      },
      rules: {
        supplierClassifyName: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
        parentId: [{ required: true, message: '请选择上级分类', trigger: 'blur' }]
      },
      classifyList: [],
      amount_level: [],
      dialog: {
        visible: false,
        title: ''
      },
      dictForm: {
        dictType: 'amount_level',
        dictLabel: '',
        dictValue: '',
        dictSort: 0
      },
      dictRules: {
        dictLabel: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
        dictValue: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }],
        dictSort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    add(row) {
      this.open = true;
      this.form = {
        classifyType: '1',
        classStatus: '1',
        sort: '0'
      };
      this.title = '添加分类';
      if (row.id) {
        this.$set(this.form, 'parentId', row.id);
      }
      this.getClassifyAllList()
      this.findSortByType(this.form.classifyType)
      this.getDicts(['amount_level']);
    },

    /**
     * @编辑
     * @param {*} id
     */
    edit(id) {
      this.title = '编辑分类';
      this.open = true;
      this.getDicts(['amount_level']);
      this.getClassifyAllList((res) => {
        res = res.filter((item) => item.id != id);
        console.log('res :>> ', res);
        this.classifyList = handleTree(res, 'id');
      });
      this.getDetail(id);
    },

    classifyForm() {
      this.form.parentId = this.form.parentId || '0';
    },
    /** 转换数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.classifyName,
        children: node.children
      };
    },
    findSortByType(type) {
      this.funcObj.findSortByType(type).then((res) => {
        if (res.code == 200) {
          this.form.sort = res.data.sort + 1;
        } else {
          this.$modal.msgError(res.msg);
        }
      });
    },
    getClassifyAllList(callback) {
      let params = { classifyType: '1', classStatus: '1' };
      getClassifyAllList(params).then((res) => {
        this.classifyList = [
          {
                id: 0,
                supplierClassifyName: '全部',
                children: this.handleTree(res, 'id')
            }
        ];
        console.log('this.classifyList :>> ', this.classifyList);
        callback && callback(res);
      });
    },

        /**
         * @获取供应商或客户树
         */
         getClassifyTree(type, callback) {
            getClassifyTree(type).then(res => {
                this.classifyList = [
                    {
                        id: '',
                        label: '全部',
                        children: res.data
                    }
                ]
                callback && callback(res)
            });
        },
    /**
     * @获详情
     * @param {*} type
     */
    getDetail(id) {
      this.loading = true;
      this.funcObj
        .get(id)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.form = res.data || {};
            if (typeof this.detailAfter === 'function') {
              this.detailAfter();
            }
          } else {
            this.$modal.msgError(res.msg);
          }
        })
        .catch((err) => {
          this.loading = false;
          console.log('err :>> ', err);
        });
    },
    addAmountLevel() {
      this.dialog.visible = true;
      this.dialog.title = '新增等级';
    },
    dictCancel() {
      this.dialog.visible = false;
    },
    submitDictForm() {
      // this.dataFormRef.validate(async (valid) => {
      //   if (valid) {
      //     this.dictForm.dictCode ? await updateData(this.dictForm) : await addData(this.dictForm);
      //     proxy?.$modal.msgSuccess('操作成功');
      //     dialog.visible = false;
      //     await this.getDicts(['amount_level']);
      //   }
      // });
      this.$refs.dictForm.validate(valid => {
        if (valid) {
          this.loading = true
          addData(this.dictForm).then(res => {
            this.loading = false
            if (res.code == 200) {
              this.$modal.msgSuccess('操作成功')
              if (close) {
                this.dialog.visible = false;
              }
              this.getDicts(['amount_level'])
            } else {
              this.$modal.msgError(res.msg)
            }
          }).catch(err => {
            this.loading = false
            console.log('err :>> ', err);
          })
        }

      });
    }
  }
};
</script>

<style lang="scss" scoped></style>